<template>
  <div class="specs_list">
    <div class="specs_header" v-if="choosedFoods">
      <span class="specs_header_text">{{ choosedFoods.name }}</span>
      <span class="specs_header_icon">
        <icon-svg
          icon-class="iconcha"
          @click.native="showChooseList"
        ></icon-svg>
      </span>
    </div>
    <div class="specs_mid">
      <span class="specs_mid_title">规格</span>
      <ul class="specs_mid_cat" v-if="specfoods">
        <li
          :class="{ specs_active: index == specsIndex }"
          v-for="(item, index) in specfoods"
          :key="index"
          @click="changeSpecsInd(index)"
        >
          {{ item.specs_name || "优乐美" }}
        </li>
      </ul>
    </div>
    <div class="specs_footer">
      <span class="specs_footer_left"
        ><span class="yuan">￥</span>{{ specfoods[specsIndex].price }}</span
      >
      <span
        class="specs_footer_right"
        @click="
          addSpecs(
            choosedFoods.category_id,
            choosedFoods.item_id,
            choosedFoods.specfoods[specsIndex].food_id,
            choosedFoods.specfoods[specsIndex].name,
            choosedFoods.specfoods[specsIndex].price,
            choosedFoods.specifications[0].values[specsIndex],
            choosedFoods.specfoods[specsIndex].packing_fee,
            choosedFoods.specfoods[specsIndex].sku_id,
            choosedFoods.specfoods[specsIndex].stock
          )
        "
        >加入购物车</span
      >
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    specfoods() {
      return this.choosedFoods.specfoods;
    },
  },
  props: ["choosedFoods", "specsIndex", "shopId"],
  methods: {
    ...mapMutations(["ADD_CART"]),
    showChooseList() {
      this.$emit("showChooseList");
    },
    changeSpecsInd(index) {
      this.$emit("changeSpecsInd", index);
    },
    addSpecs(
      category_id,
      item_id,
      food_id,
      name,
      price,
      specs,
      packing_fee,
      sku_id,
      stock
    ) {
      this.ADD_CART({
        shopid: this.shopId,
        category_id,
        item_id,
        food_id,
        name,
        price,
        specs,
        packing_fee,
        sku_id,
        stock,
      });
      this.showChooseList();
    },
  },
};
</script>
<style scoped lang='scss'>
@import "@/style/mixin";

.specs_list {
  position: fixed;

  width: 70%;
  padding: 0.5rem;

  background-color: #fff;

  @include center();

  .specs_header {
    color: #222;

    font-size: 0.7rem;

    text-align: center;

    .specs_header_text {
      display: inline-block;
    }

    .specs_header_icon {
      position: absolute;
      top: 0;
      right: 2%;
    }
  }
}

.specs_mid {
  // padding: .5rem;

  .specs_mid_title {
    display: block;

    margin-bottom: 0.5rem;

    color: #666;

    font-size: 0.6rem;
  }
}

.specs_mid_cat {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  li {
    margin-right: 1rem;
    margin-bottom: 0.4rem;
    padding: 0.2rem;

    border: 0.025rem solid #ddd;

    font-size: 0.6rem;
  }

  .specs_active {
    color: #3199e8;
    border-color: #3199e8;
  }
}

.specs_footer {
  margin-top: 0.5rem;

  .specs_footer_left {
    color: #ff6000;

    font-size: 0.8rem;
    font-weight: bold;

    .yuan {
      color: inherit;

      font-size: 0.5rem;
      font-weight: inherit;
    }
  }

  .specs_footer_right {
    float: right;

    padding: 0.3rem 0.5rem;

    color: #fff;
    border-radius: 0.2rem;
    background-color: $blue;

    font-size: 0.6rem;
  }
}
</style>
